<template>
    <!-- 快递发货 -->
    <div class="delivery-fast">
        <div class="delivery-fast-header">
            <span class="name">快递发货</span
            ><el-popconfirm
                icon="WarningFilled"
                placement="top"
                width="200px"
                :title="switchTitle"
                :disabled="isDisabled"
                @confirm="confirmSwitch">
                <template #reference
                    ><el-switch
                        :disabled="isDisabled"
                        class="custom-switch"
                        v-model="form.switchOn"
                        :inline-prompt="true"
                        :active-value="1"
                        :inactive-value="2"
                        active-text="开"
                        inactive-text="关"
                        :before-change="handleBeforeChange" /></template
            ></el-popconfirm>
            <div class="tip">启用后，买家下单可以选择快递发货，由商家安排快递送货上门。</div>
        </div>
        <!-- tab -->
        <div class="delivery-fast-main">
            <el-radio-group class="custom-radio-group" v-model="tabActiveName">
                <el-radio-button v-for="{ name, label } in detailTabs" :key="label" :label="label">{{
                    name
                }}</el-radio-button>
            </el-radio-group>
            <component :is="componentId" :key="tabActiveName"></component>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent, onUnmounted, onDeactivated, reactive, watch, onMounted } from 'vue';
import store from '@/store/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/request/index';

const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
const isDisabled = computed(() => {
    return !permissions.has('delivery_management:edit_way');
});

const form = reactive({
    id: null,
    switchOn: 1 // todo:false
});

const detailTabs = [
    { label: 'template', name: '运费模板' },
    { label: 'address', name: '退货地址' }
];
let tabActiveName = ref('template');
const componentId = computed(() => {
    const defineAsyncComponents = {
        template: defineAsyncComponent(() => import('./template/index.vue')),
        address: defineAsyncComponent(() => import('./address/index.vue'))
    };
    return defineAsyncComponents[tabActiveName.value] || null;
});
const switchTitle = computed(() => {
    return form.switchOn == 1
        ? '关闭快递发货后，客户将无法选择快递发货。确定要关闭快递发货吗？'
        : '开启快递发货后，客户将可以选择快递发货。确定要开启快递发货吗？';
});

const handleBeforeChange = async () => {
    // const desc = form.switchOn ? '是否要关闭' : '启用后，买家下单可以选择快递发货，由商家安排快递送货上门。';
    // return await ElMessageBox.confirm(desc, '提示信息', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    // })
    //     .then(async () => {
    //         await request('distributionSettingsSwitch', form);
    //         ElMessage({
    //             type: 'success',
    //             message: '保存成功'
    //         });
    //         return true;
    //     })
    //     .catch(() => {
    //         return false;
    //     });
};

const getConfig = async () => {
    const { data = {} } = await request('refundAddressInfo');
    form.switchOn = data?.shopDeliverySwitch;
    form.id = data?.id;
};

const confirmSwitch = async () => {
    await request('refundAddressSave', {
        shopDeliverySwitch: form.switchOn == 2 ? 1 : 2,
        saveType: 'delivery_switch',
        id: form.id
    });
    form.switchOn = form.switchOn == 2 ? 1 : 2;
};

onMounted(() => {
    getConfig();
});
onUnmounted(() => {
    // tabActiveName.value = 'template';
});
onDeactivated(() => {
    // tabActiveName.value = 'template';
});
</script>

<style lang="scss" scoped>
.delivery-fast {
    min-height: calc(100% - 74px);
    height: calc(100% - 74px);
    &-header {
        background: #fff;
        height: 48px;
        padding: 0 24px 24px 24px;
        margin-bottom: 16px;
        .name {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            margin-right: 12px;
        }
        .tip {
            margin-top: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }
    }
    &-main {
        min-height: calc(100% - 88px);
        padding: 24px;
        background-color: #fff;
        box-sizing: border-box;
    }
    .custom-radio-group {
        :deep {
            .el-radio-button:first-child .el-radio-button__inner {
                border-radius: 0;
            }
            .el-radio-button:last-child .el-radio-button__inner {
                border-radius: 0;
                border-left: 0 !important;
            }
            .el-radio-button__original-radio:checked + .el-radio-button__inner {
                background: #ffffff;
                border: 1px solid #ff6b00;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ff6b00;
            }
            .el-radio-button__inner {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
            }
        }
    }
}
</style>
